<template>
  <div class="groupChaDetail">
    <div class="group-content">
      <div class="show-box">
        <div class="bottom-title">
          <div class="t-flag"></div>
          <div class="t-text">详细查询</div>
        </div>
        <div class="bottom-content-detail">
          <el-form :model="form" :rules="rules" label-width="100px">
            <el-form-item label="会员账号:" prop="account">
              <el-input style="width: 200px" v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item style="text-align: left" label="查询项目:">
              <el-select class="select-item" v-model="form.selectProjectList" @change="handleSelectPro" multiple
                         placeholder="请选择">
                <el-option
                  v-for="item in projectOptions"
                  :key="item.id"
                  :label="item.project_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: left" label="拦截状态:">
              <el-select v-model=form.selectState placeholder="请选择">
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: left" label="起止时间:">
              <el-date-picker
                v-model="form.selectData"
                type="daterange"
                @change="handleSelectTime"
                unlink-panels
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <el-button class="detail-btn" @click="handleSubmit()">确定</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%">
      <i class="el-icon-check" ></i>
      <div class="dialog-title">根据您选择的筛选条件输出结果为:</div>
      <div class="d-content-box">
           <div class="b-line">
             <div class="b-l-title">姓名:</div>
             <div class="b-l-content">
               <span>{{queryGuo.username}}</span>
             </div>
           </div>
           <div class="b-line">
             <div class="b-l-title">账号:</div>
             <div class="b-l-content">
               <span>{{queryGuo.account}}</span>
             </div>
           </div>
           <div class="b-line">
             <div class="b-l-title">状态:</div>
             <div  class="b-l-content">
               <span v-if="queryGuo.state===1">拦截</span><span v-if="queryGuo.state===2">不拦截</span>
             </div>
           </div>
           <div class="b-line">
             <div class="b-l-title">业绩:</div>
             <div class="b-l-content">
               <span>{{queryGuo.achievement}}</span>
             </div>
           </div>
           <div class="b-line">
             <div class="b-l-title">投资总额:</div>
             <div class="b-l-content"><span>{{queryGuo.invest}}</span>
             </div>
           </div>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    name: "GroupChaDetail",
    data() {
      return {
        form: {
          account: '15002827630',
          selectProjectList: [],
          selectState: 1,
          selectData: []
        },
        rules: {
          account: [
            {required: true, message: '必填项'}
          ]
        },
        projectOptions: [
          {
            id: '',
            project_name: ''
          }
        ],
        stateOptions: [
          {
            value: 1,
            label: '不拦截'
          },
          {
            value: 2,
            label: '拦截'
          }
        ],
        dialogVisible:false,
        queryGuo:{
          username:'',
          account:'',
          state:'',
          achievement:'',
          invest:''
        }
      }
    },
    mounted() {
      this.$api.ProjectList().then((res) => {
        if (res.data.length !== 0) {
          this.projectOptions = res.data
        }
      }, (err) => {
        this.$message.error(err.msg)
      })
    },
    methods: {
      //选中的项目改变时
      handleSelectPro(item) {

      },
      //时间改变时触发
      handleSelectTime() {

      },
      handleSubmit() {
        let that=this
        let data = {
          mobile: this.form.account,
          project_id: this.form.selectProjectList.join(','),
          is_cut: this.form.selectState,
          start_time: this.form.selectData[0],
          end_time: this.form.selectData[1]
        }
        console.log(data)
        if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.form.account))) {
          this.$message.error("请输入正确的11位手机账号")
          return
        } else {
          if (that.form.selectData.length === 0 && that.form.selectProjectList.length === 0) {
            that.$message.error("请至少选择起止时间或者查询项目")
            return
          } else {
            that.$api.GroupDetailQuery(data).then((res) => {
              console.log(res)
              if(res.data){
                that.queryGuo.username=res.data.username
                that.queryGuo.account=that.form.account
                that.queryGuo.achievement=res.data.self_money
                that.queryGuo.invest=res.data.total_money
                that.queryGuo.state=that.form.selectState
                that.dialogVisible=true
              }
            }, err => {
              that.$message.error(err.msg)
            })
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .el-icon-check{
    color: green;
    font-size: 40px;
    font-weight: bolder;
  }
  .dialog-title{
    font-size: 22px;

  }
  .d-content-box{
    padding: 20px 0;
    font-size: 22px;
    .b-line{
      width: 100%;
      display: flex;
      .b-l-title{
        width: 50%;
        text-align: right;
        padding-right: 10px;
      }
      .b-l-content{
        width: 50%;
        text-align: left;
      }
    }
  }
  .groupChaDetail /deep/ .el-dialog__body{
    padding: 20px 20px;
  }
  .groupChaDetail {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: auto;
    .group-content {
      margin-top: 10px;
      background-color: #ffffff;

      .bottom-title {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;

        .t-flag {
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }

        .t-text {
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }
      }

      .bottom-content-detail {
        padding: 20px 40px 40px 30px;
        text-align: left;

        .detail-btn {
          width: 100px;
          height: 40px;
          padding: 0;
          line-height: 40px;
          background-color: #2A4BF0;
          color: #ffffff;
          margin-left: 100px;
        }
      }
    }
  }
</style>
